<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../../assets/images/01_11.png" @click="getBack" alt class="img_zuo" />
        <div>跟踪巡查</div>
      </div>
    </header>
    <div style="margin-top:1.8519rem;"></div>
    <div class="numberman">
      <div>人数：{{numberman}}</div>
      <img @click="showren=true" src="../../../assets/images/app_x.png" />
    </div>
    <van-popup class="xuanren" v-model="showren" position="bottom">
      <div>
        <van-picker show-toolbar @confirm="onConfirm" :columns="columns" @cancel="onCancel" />
      </div>
    </van-popup>


    <div class="yyandimg">
      <div class="boxitem">
        <textarea @input="Textarea($event)" placeholder="请描述内容(500字以内)" id="txtbxnr" v-model="txtbxnr" maxlength="500"
          ref="count"></textarea>
        <span class="wordnum">{{wordnumber}}/500</span>
      </div>

      <div class="ly_tc">
        <img src="../../../assets/images/ly_dt.gif" alt="" />
      </div>
      <div class="yuyin_list">
        <div class="ly_start">
          <span class="ly">
            <img src="../../../assets/images/mkf.png" />
            <span>按住说话</span>
          </span>
        </div>
        <div class="ly_play" data-url="null">
          <div>
            <span class="ly">
              <img src="../../../assets/images/play.png" />
              <span class="ly_s">0"</span>
            </span>
            <img class="del_ly" src="../../../assets/images/delete.png" />
            <img class="zhuan" src="../../../assets/images/zhuan.png" />
          </div>
        </div>
      </div>

      <ul class="img-box img_upload">
        <div @click="clickpicture" class="img-item radius-m"></div>
      </ul>
      <ul class="img-box imgs_ul" v-show="list_img.length>0">
        <li class="img-item radius-m img-list" :class="{'show-desc':obj.showDesc}" v-for="(obj,i) of list_img" :key="i">
          <div class="img-content">
            <img class="img-src img_tu" :src="show_path + obj.imgs" />
            <div class="img-group">
              <div class="img-btn">
                <div class="del-btn" @click.stop="del(i,'img')">X</div>
              </div>
              <div class="img-btn">
                <div class="desc-btn" @click.stop="showDesc(i)">A</div>
              </div>
            </div>
          </div>
          <input class="img-desc" type="text" :style="i === number ? 'display: block;' : ''" @click.stop="stopMP"
            placeholder="请输入描述" v-model="imgText[i]" />
        </li>
      </ul>
      <ul class="video-list" v-for="(obj,i) of list_mv">
        <video controls>
          <source :src="show_path+obj.video" type="video/mp4">
          <source :src="show_path+obj.video" type="video/ogg">
          您的浏览器不支持Video标签。
        </video>
        <div class="del" @click.stop="del(i,'mv')"><img src="../../../assets/images/delete.png" /></div>
      </ul>
    </div>
    <div style="box-sizing: border-box;padding:20px 10px;">
      <div @click="lastyes" style="width: 90%;" class="button">确认</div>
    </div>
    <van-popup class="xuanzimg" v-model="btm_show" position="bottom" :close-on-click-overlay="false">
      <div class="btm_tk_item">上传资料</div>
      <!-- <div v-if="terminal === true" class="btm_tk_item" @click="sp">上传视频</div> -->
      <div class="btm_tk_item" @click="pz">拍照</div>
      <div class="btm_tk_item btm_tk_item-end" @click="xc">从手机相册选择</div>
      <div class="btm_tk_cancle" @click="btm_show = false">取消</div>
    </van-popup>
    <!-- 提示弹框 -->
    <van-popup v-model="tishitan" :close-on-click-overlay="false">
      <div class="contt">
        <div class="tan_title">
          <div>提示</div>
          <img class="img_false" @click="tishitan=false" src="../../../assets/images/false.png" />
        </div>
        <div class="tishi_main">
          {{namess}}
        </div>
        <div style="box-sizing: border-box;padding-bottom:10px;">
          <div @click="tishitan=false" class="button">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
  import Vue from 'vue';
  import "../../../assets/css/picker.css"
  import {
    Dialog,
    Toast
  } from 'vant';
  import upload from "../../../assets/js/upload_vue.js"
  import terminal from "../../../assets/js/terminal";
  export default {
    name: "xcbs_add",
    data() {
      return {
        imgText: [],//图片描述
        btm_show: false, //图片选择
        userId: '',
        number:null,
        tishitan: false,
        namess: 'dfsgdsg的格式的非官方',
        patrolTroubleshootId: '',
        txtbxnr: '', //备注描述内容
        list_img: [], //图片
        list_mv: [], //视频
        show_path: null, //请求路径
        lev: '',
        styleId: '',
        stylename: '',
        wordnumber: 0,
        stylelist: [{
          informationName: "移交"
        }, {
          informationName: "上报"
        }, {
          informationName: "闭环"
        }],
        terminal: false,
        router: '',
        numberman: 1,//人数
        columns: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
        showren: false,
        query:null,
        istrue:false,
      };
    },
    components: {
      [Toast.name]: Toast
    },
    destroyed() {
      setTimeout(() => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
    methods: {
      onConfirm(value, index) {
        this.showren = false
        this.numberman = value
      },
      onCancel() {
        this.showren = false
      },
      stopPlay() {
        this.$yy.stop();
      },

      Textarea(e) {
        var num = this.txtbxnr.length
        if (num < 0) {
          num = 0;
        }
        this.wordnumber = num
        var commentListEl = document.getElementById('txtbxnr')
        if (e.target.scrollHeight > 1000) {
          return false
        }
        // console.log(e.target.scrollHeight)
        // console.log(e)
        commentListEl.style.height = 1000 - e.target.scrollHeight + 'px'
        e.target.style.height = 'auto'
        e.target.style.height = e.target.scrollHeight + 10 + 'px'
      },
      stopMP() { },
      lastyes() {
        let that = this;
        let ly_file = $(".ly_play").attr("data-url");
        let second = $(".ly_s").html()
        // if (style == undefined) {
        //   that.namess = '请选择方式'
        //   that.tishitan = true;
        // } else
         if (that.txtbxnr == '') {
          that.namess = '请输入内容'
          that.tishitan = true;
        } else {
          that.updata_img(ly_file, second)
        }
      },
      updata_img(ly_file, second) {
        if(this.istrue){
          return false
        }
        this.istrue=true

        let that = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        let a = ''
        that.list_img.map(res => {
          a += ',' + res.imgs;
        })
        let c = a.substring(1)
        let d = ''
        that.imgText.map(res => {
          d += ',' + res;
        })
        let e = d.substring(1)

        let task = plus.uploader.createUpload(
          that.$global_msg.Url.host + '/partroInspection/floowAndLoop', {
          method: "POST"
        },
          function (t, status) {
            // 上传完成
            let res = JSON.parse(t.responseText);
            console.log(res)
            // alert(JSON.stringify(res))
            that.tost()
            if (res.code == 200) {

              console.log(res)
              that.stopPlay();
            that.$router.back();
            } else {
              Toast('上传失败！')
              that.istrue=true
            }

          });
        task.addFile(ly_file, {
          key: "multipartFile"
        }); //上传的录音文件
        task.addData("userId", that.userId + ""); //userid
        task.addData("status", ""); //1闭环 2上报 3移交
        task.addData("peopleNum", that.numberman + ""); //人数
        task.addData("title", that.txtbxnr + ""); //描述
        task.addData("contractime", second + ""); //语音时长
        task.addData("imgUrl", c + ""); //图片 3.27that改为this
        task.addData("videoUrl",  ""); //视频
        task.addData("imgText", e + ""); //图片描述
        task.addData("noweInfoId", that.query.id + ""); //id
        task.addData("type","1"); // 1 跟踪 2 闭环
        task.start();
      },
      getBack() {
        this.stopPlay();
        this.$router.back();
      },
      ly() { //  语音
        let that = this;
        if (that.terminal !== true) {
          $(".yuyin_list").hide(); //隐藏录音按钮
        }
        this.$yy.ly_fun({
          play_img: require("../../../assets/images/play.png"),
          playing_img: require("../../../assets/images/play_dt.gif"),
          _this: this
        }, function (res) {
          that.txtbxnr += res
          // alert(res)
          var num = that.txtbxnr.length
          if (num < 0) {
            num = 0;
          }
          that.wordnumber = num
          if (that.txtbxnr.length >= 500) {
            // that.txtbxnr=res
            return that.$toast('文字限制在500字以内!')
          }
        });
      },

      clickpicture() { //点击图片
        this.btm_show = true
      },
      xc() { //相册
        let _this = this;
        _this.btm_show = false;
        upload.xiangce('image', true, function (path) {
          console.log(path);
          path.map(res => {
            console.log(res)
            _this.uploadImg(res);
          })
        }, function (msg) {
          if (msg !== 'User cancelled') {
            _this.$toast(msg);
          }
        });
      },
      sp() {
        let that = this;
        that.btm_show = false;
        upload.record(function (path) {
          console.log(path);
          // alert(path)
          // let a = Array.from(path)
          //获取视频信息
          // a.map(res => {
          // })
          //获取视频信息
          plus.io.getVideoInfo({
            filePath: path,
            success: function (data) {
              // alert(JSON.stringify(data))
              console.log(data.duration)
              //视频时间15秒以内才上传
              if ((data.duration * 1) > 11) {
                that.$toast('上传的视频时间请在10秒以内');
                return;
              } else {
                that.uploadVideo(path);
              }
            },
            fail: function (e) {
              that.$toast(e.msg);
            }
          });

        }, function (msg) {
          if (msg !== 'User cancelled') {
            // that.$toast(msg+"错误2");
          }
        });
      },
      pz() {
        let that = this;
        that.btm_show = false;
        upload.paizhao(function (path) {
          console.log(path);
          that.uploadImg(path);
        }, function (msg) {
          if (msg !== 'resultCode is wrong') {
            that.$toast(msg);
          }
        });
      },
      tost() {
        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log(e.message);
        }
      },
      uploadImg(path) { //上传图片
        let that = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        let params = {};
        upload.uploadImg(that.$global_msg.Url.hosts + '/partroInspection/uploadImg', 'POST', params, path,
          'multipartFile',
          function (data) {
            if (data.code == 200) {
              that.list_img.push({
                imgs: data.rows
              })
            } else {
              that.$toast(data.msg);
            }
            that.tost();
          },
          function (msg) {
            if (msg !== 'User cancelled') {
              that.$toast(msg);
            }
            that.tost();
          });
      },
      uploadVideo(path) { //上传视频
        let that = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        let params = {};
        upload.uploadVideo(that.$global_msg.Url.hosts + '/partroInspection/uploadMV', 'POST', params, path,
          'multipartFile',
          function (data) {
            that.tost();
            // alert(JSON.stringify(data))
            data = JSON.parse(data);
            if (data.code == 200) {
              that.list_mv.push({
                video: data.rows
              });
            } else {
              console.log(data);
              that.$toast(data.msg);
            }

          },
          function (msg) {
            // that.$toast(msg+"错误4");
            // that.tost();
          });
      },
      showDesc(i) { //显示图片描述
        this.list_img[i].showDesc = !this.list_img[i].showDesc;
        this.$forceUpdate();
      },
      del(i, type) { //删除图片
        if (type == 'img') {
          this.list_img.splice(i, 1);
          this.imgText.splice(i, 1);
        } else {
          this.list_mv.splice(i, 1);
        }
      },
    },
    mounted() {
      var _this = this;
      document.body.style.overflowY = 'auto';
      document.body.style.backgroundColor = "#FFFFFF";
      this.terminal = terminal.terminals().android;
      this.show_path = this.$global_msg.Url.hosts + '';
      this.ly()
      //切换后台
      document.addEventListener("pause", function () {
        _this.stopPlay();
      }, false);
    },
    created() {
      this.userId = localStorage.getItem("userId") //获取访问id
      console.log(this.userId)
      this.query = this.$route.query;
      console.log(this.query)
    }
  };
</script>
<style scoped>
  .numberman {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DDDDDD;
    padding: 0.3rem 0.4rem;
  }

  .numberman img {
    width: 0.444444rem;
    height: 0.444444rem;
  }

  /* .contant {
    border-bottom: 1px solid #F7F7F9;
  }

  .contant .please {
    padding: 0 0.4rem;
    margin-top: 0.15rem;
  }

  .contant .chooseyes {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 0.4rem;
  }

  .infostyle {
    display: inline-block;
    width: 20%;
    text-align: center;
    padding: 0.2rem 0.15rem;
    background: #EEEEEE;
    border-radius: 0.5rem;
    margin-left: 0.33rem;
    margin-bottom: 0.2rem;
  }

  .active {
    color: #FFFFFF;
    background: #2B6CFE;
  }
 */
  .wordnum {
    position: absolute;
    right: 0.1rem;
    bottom: 0.1rem;
    color: #999;
  }

  .tan_title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #DDDDDD;
    height: 1rem;
    align-items: center;
  }

  .img_false {
    width: 0.5rem;
  }

  .tishi_main {
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
  }

  .contt {
    padding: 0rem 0.2rem;
  }

  .button {
    width: 30%;
    margin: auto;
    margin-top: 0.4rem;
    color: white;
    text-align: center;
    padding: 0.2rem 0;
    background-color: #2B6CFE;
    border-radius: 0.105185rem;
  }

  .van-popup {
    width: 80%;
    border-radius: 0.2rem;
    max-height: 9rem;
  }

  .xuanren {
    width: 100% !important;
    background-color: rgba(0, 0, 0, 0);
  }

  .yyandimg {
    border-radius: 0.2rem;
    background-color: white;
    margin-top: 0.15rem;
  }

  /* 上传图片弹框 */
  .xuanzimg {
    width: 95% !important;
    margin-left: 2.5%;
    background-color: rgba(0, 0, 0, 0);
  }

  .btm_tk_item {
    height: 1.388888rem;
    line-height: 1.388888rem;
    border-bottom: 1Px solid #DDDDDD;
    text-align: center;
    /* margin-left: 0.185185rem; */
    /* margin-right: 0.185185rem; */
    width: auto;
    background-color: #FFFFFF;
  }

  .btm_tk_item:first-child {
    border-radius: 0.148148rem 0.148148rem 0 0;
    color: #999999;
  }

  .btm_tk_item-end {
    border-radius: 0 0 0.148148rem 0.148148rem;
  }

  .btm_tk_cancle {
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border: 1Px solid #DDDDDD;
    text-align: center;
    margin-top: 0.185185rem;
    margin-bottom: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }

  /* yinhuan复制 */
  /* 视频列表 */
  /* .video-list {
    padding-top: 0.259259rem;
    margin-bottom: 0.37037rem;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
    border-top: 1px #DDDDDD solid;
  }

  .video-list video {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    width: auto;
    height: 4.87037rem !important;
    margin-top: 0.259259rem;
  }

  .video-list video:first-child {
    margin-top: 0;
  }

  .video-list .del {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }

  .video-list .del img {
    width: 100%;
    height: 100%;
  }

  .voice {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.8rem;
    width: 4rem;
    border: 1px solid #F7F7F9;
    color: #5F5D5C;
    margin: 0.3rem;
  }

  .voice img {
    margin-right: 0.2rem;
    width: 0.4rem;
  }
 */
  /* 图片列表 */
  .img-box {
    margin-left: 0.2778rem;
    margin-right: 0.2778rem;
    margin-top: 0.34074rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }

  .img-box .img-item {
    width: 4.481481rem;
    height: 2.814814rem;
    background-image: url(../../../assets/images/putong/pz_sc.png);
    background-size: 100% 100%;
    margin-bottom: 0.425925rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px #CCCCCC solid;
    border-radius: 30px;
  }

  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content {
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
  }

  .img-box .img-item .img-content .img-src {
    width: 100%;
    height: 100%;
    z-index: 11;
    object-fit: cover;
  }

  .img-box .img-item .img-content .img-group {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }

  .img-box .img-item .img-content .img-group .img-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px #FFFFFF solid;
  }

  .img-box .img-item .img-content .img-group .img-btn:last-child {
    border-bottom: none;
  }

  .img-box .del-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  .img-box .desc-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  /* 图片列表的描述 */
  .img-box .show-desc {
    height: 3.703703rem;
  }

  .img-box .img-item .img-desc {
    width: 100%;
    height: 0.851851rem;
    /* text-align: center; */
    flex: 1;
    background-color: #FFFFFF;
    display: none;
  }

  .img-box .show-desc .img-desc {
    display: block;
  }

  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .img-list:first-child {
    margin-left: 4.814814rem;
  }



  .imgs_ul {
    margin-top: -3.255554rem;
    z-index: 2 !important;
  }

  .img_upload .img-item {
    z-index: 3 !important;
  }

  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .boxitem {
    position: relative;
    padding: 0px 0.3704rem;
    font-size: 0.3889rem;
    border-bottom: 1Px solid #DDDDDD;
    overflow: hidden;
  }

  .boxitem textarea {
    width: 100%;
    padding-top: 0.3704rem;
    /* max-height: 10rem; */
    height: 2.125rem;
    /* overflow: hidden; */
  }

  /* 语音 */
  .yuyin_list {
    width: 100%;
    height: 1.4815rem;
    position: relative;
    display: flex;
    padding: 0.2315rem 0.1111111111111111rem 0.2315rem 0.3704rem;
    word-break: break-all;
    font-size: 0.3888888888888889rem;
    background-color: #fff;
    border-bottom: 1Px solid #ddd;
    box-sizing: border-box;
  }

  .ly {
    width: 3.0185185185185186rem;
    height: 1rem;
    border: 1Px solid #ddd;
    border-radius: 0.1111rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #757575;
    /* justify-content: center; */
  }

  .ly img {
    width: 0.3704rem;
    height: 0.5rem;
    margin: 0 0.2777777777777778rem;
    /* margin-right: 0.2777777777777778rem; */
  }

  .ly_play .ly>span {
    float: right;
    /* margin: 0.282222rem 0.9259259259259259rem 0 0; */
  }

  .ly_start .ly>span {
    float: right;
    /* margin: 0.2037037037037037rem 0.46296296296296297rem 0 0; */
  }

  .del_ly,
  .zhuan {

    width: 0.8518518518518519rem;
    margin: 0.09259259259259259rem 0 0 0.23148148148148148rem;
    height: 0.8518518518518519rem;
  }

  .ly_tc {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    height: 3.7037037037037037rem;
    width: 3.7037037037037037rem;
    border-radius: 0.18518518518518517rem;
    text-align: center;
    z-index: 2000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.3888888888888889rem;
    display: none;
  }

  .ly_tc>img {
    margin: 1rem auto 0 auto;
    width: 1.5rem;
  }

  .yc {
    display: none;
  }

  .ly_play>div {
    display: flex;
  }

  .ly_play {
    display: none;
  }
</style>
